
<template>
  <div class="all-container">
    <div class="all-container-padding bg" >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form :model="userInfo" :rules="rules" ref="EditorUserForms">
            <el-form-item label="用户账号" prop="username" :label-width="formLabelWidth">
              <el-col :span="8">  <el-text v-model="userInfo.account" disabled >{{userInfo.account}}</el-text></el-col>
            </el-form-item>
            <el-form-item label="用户昵称" prop="phone" :label-width="formLabelWidth">
              <el-col :span="8">
                <el-text v-model="userInfo.nickname">{{userInfo.nickname}}</el-text>
              </el-col>
            </el-form-item>
            <el-form-item label="用户角色" prop="full_name" :label-width="formLabelWidth">
              <el-col :span="8">
                <el-text v-model="userInfo.admin">{{userInfo.admin > 0 ? '管理员' : '普通用户'}}</el-text>
              </el-col>
            </el-form-item>
          </el-form>
        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</template>
<script>
import {getUserInfo} from '@/api/login'
import {getToken} from '@/request/token'
export default {
  data() {

    return {
      ruleForm: {},//修改密码的表单
      activeName: "first",
      loading: true,
      formLabelWidth: "150px",
      userInfo: {
        "account":'',
        "nickname":'',
        "avatar":'',
        "admin": 0
      },
    };
  },
  created() {
    // 在组件创建后调用获取用户信息的函数
    this.getUserInfo();
  },
  computed: {
  },
  methods: {
    //获取个人用户的信息
    getUserInfo() {
      // 获取token
      let token = getToken();
      let that = this
      // 获取用户信息
      getUserInfo(token).then(res => {
        that.userInfo = res.data
      }).catch(error => {
        if (error !== 'error') {
          that.$message({type: 'error', message: '用户信息加载失败！', showClose: true})
        }
      })
    }
  }
};
</script>
